<template>
    <div class='BottomContact'>
        <div class="contact">
            <MainContentPc>
                <div class="main">
                    <div class="call">
                        <div class="title">联系方式</div>
                        <div class="item" v-for="item in contactList" :key="item.id">
                            <div class="item-title">{{ item.name }}</div>
                            <div class="ctx" v-if="item.address">
                                <div class="label">地址：</div>
                                <div class="value">{{ item.address }}</div>
                            </div>
                            <div class="ctx" v-if="item.zipCode">
                                <div class="label">邮编：</div>
                                <div class="value">{{ item.zipCode }}</div>
                            </div>
                            <div class="ctx" v-if="item.mobile">
                                <div class="label">电话：</div>
                                <div class="value">{{ item.mobile }}</div>
                            </div>
                            <div class="ctx" v-if="item.email">
                                <div class="label">邮箱：</div>
                                <div class="value">{{ item.email }}</div>
                            </div>
                        </div>
                    </div>
                    <div class="map">
                        <div class="inner" @click="open"></div>
                    </div>
                    <div class="message">
                        <div class="title">在线留言</div>
                        <input
                            v-model="formData.mobile"
                            placeholder="请填写联系方式"
                            placeholder-class="input-placeholder"
                        />
                        <textarea
                            v-model="formData.text"
                            placeholder="请输入留言内容"
                            type="textarea"
                            placeholder-class="input-placeholder"
                        />
                        <div class="submit" @click="submit">提交</div>
                    </div>
                </div>
            </MainContentPc>
        </div>
    </div>
</template>

<script setup lang="ts">
import mapImg from '@/assets/images/map.png'
const contactList:Ref<Array<{
    id:number,
    name:string,
    address?:string,
    zipCode?:string,
    mobile?:string,
    email?:string
}>> = ref([
    {
        id:1,
        name:'济宁总部',
        address:'北京市朝阳区阜通东大街10号-期10楼1003-1004室',
        zipCode:'100085',
        mobile:'0371 - 63910000',
        email:'hx@hexieauto.com'
    },
    {
        id:2,
        name:'重庆分公司',
        address:'北京市朝阳区阜通东大街10号-期10楼1003-1004室',
        zipCode:'100085',
        email:'hx@hexieauto.com'
    },
    {
        id:3,
        name:'河南分公司',
        address:'北京市朝阳区阜通东大街10号-期10楼1003',
        mobile:'0371 - 63910000',
        email:'hx@hexieauto.com'
    }
])
const $viewerApi = getCurrentInstance()?.appContext.config.globalProperties.$viewerApi

const open = ()=>{
    $viewerApi && $viewerApi({
        images:[mapImg]
    })
}

const formData:Ref<{
    mobile:string,
    text:string
}> = ref({
    mobile:'',
    text:''
})

const submit = ()=>{
    console.log(formData.value)
}
</script>


<style lang="scss" scoped>
.BottomContact{
    .contact{
        height: 576px;
        background: url('@/assets/images/bottom-contact-bgc2.jpg') no-repeat center center;
        .main{
            display: flex;
            justify-content: space-between;
            color: #999;
            padding: 70px 30px;
            .title{
                font-size: 26px;
                color: #e4bb79;
                padding-bottom: 20px;
            }
            .call{
                .item{
                    &+ .item{
                        margin-top: 20px;
                    }
                    .item-title{
                        border-left: 2px solid #d3ad6f;
                        padding-left: 10px;
                        line-height: 15px;
                        margin-bottom: 5px;
                    }
                    .ctx{
                        display: flex;
                        padding-top: 8px;
                    }
                }
            }
            .map{
                display: flex;
                justify-content: center;
                align-items: center;
                .inner{
                    margin-top: 72px;
                    width: 350px;
                    height: 350px;
                    filter: brightness(50%);
                    transition: all .3s;
                    cursor: pointer;
                    background: url('@/assets/images/map.png') center center;
                    background-size: cover;
                    &:hover{
                        filter: brightness(100%);
                    }
                }
            }
            .message{
                width: 370px;
                input,textarea{
                    display: block;
                    outline: 0;
                    width: 100%;
                    height: 40px;
                    margin: 20px 0 0 0;
                    padding: 10px 20px;
                    font-size: 16px;
                    border: none;
                    background: #707070;
                    box-sizing: border-box;
                    &::placeholder{
                        color: #999;
                    }
                }
                textarea{
                    height: 200px;
                    resize: none;
                }
                .submit{
                    width: 105px;
                    height: 30px;
                    border-Radius: 15px;
                    border: 1px solid #fff;
                    color: #fff;
                    text-align: center;
                    cursor: pointer;
                    line-height: 30px;
                    margin: 20px 0 0 0;
                    transition: all .3s;
                    &:hover{
                        background: #ffffff23;
                    }
                }
            }
        }
    }
}
</style>